<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>后台登录模板-飞天素材网</title>
  <link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
<!-----header---->
<div class="header">
  <h1 class="headerLogo"><a title="" target="_blank" href="#"><img src="img/JiXeiShu/jxs.png" class="logo"></a></h1>
</div>
<!-----banner---->
<div class="banner" style="background-image: url(img/banner3.jpg) ">
  <div class="login-aside">
    <div id="o-box-down">
      <div class="login-name">用户登录</div>
      <form class="registerform"    >
        <div class="fm-item">
          <input type="text" placeholder="请输入账号" maxlength="100" name="username" style="height: 50px" id="username">
        </div>

        <div class="fm-item">
          <input type="password" placeholder="请输入密码" maxlength="100" name="password" style="height: 50px" id="password">
        </div>

        <div id="" class="fm-item yzm">
          <div id="v_container" style="width: 120px;height: 50px;margin: 8px 0px 0px 250px;float: left"></div>
          <input type="text" id="code_input" style="height: 48px;width:90px;margin:-50px 0px 0px 17px;float: left;" value="" placeholder="请输入验证码"/>

        </div>
        <div class="clearfix"></div>
        <div class="fm-item remember">


        </div>
      </form >
        <div class="clearfix"></div>
      <button type="submit" id="my_button" class="login-btn" style="background-color: orangered;margin: 0px 0px 0px 42px;float: left;height: 50px">登录</button>

    </div>

  </div>
</div>



<div class="footer"><p>Copyright © 2019-2020</p></div>
<script>
  !(function(window, document) {
    function GVerify(options) { //鍒涘缓涓€涓浘褰㈤獙璇佺爜瀵硅薄锛屾帴鏀秓ptions瀵硅薄涓哄弬鏁�
      this.options = { //榛樿options鍙傛暟鍊�
        id: "", //瀹瑰櫒Id
        canvasId: "verifyCanvas", //canvas鐨処D
        width: "100", //榛樿canvas瀹藉害
        height: "30", //榛樿canvas楂樺害
        type: "blend", //鍥惧舰楠岃瘉鐮侀粯璁ょ被鍨媌lend:鏁板瓧瀛楁瘝娣峰悎绫诲瀷銆乶umber:绾暟瀛椼€乴etter:绾瓧姣�
        code: ""
      }

      if(Object.prototype.toString.call(options) == "[object Object]"){//鍒ゆ柇浼犲叆鍙傛暟绫诲瀷
        for(var i in options) { //鏍规嵁浼犲叆鐨勫弬鏁帮紝淇敼榛樿鍙傛暟鍊�
          this.options[i] = options[i];
        }
      }else{
        this.options.id = options;
      }

      this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
      this.options.letterArr = getAllLetter();

      this._init();
      this.refresh();
    }

    GVerify.prototype = {
      /**鐗堟湰鍙�**/
      version: '1.0.0',

      /**鍒濆鍖栨柟娉�**/
      _init: function() {
        var con = document.getElementById(this.options.id);
        var canvas = document.createElement("canvas");
        this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
        this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
        canvas.id = this.options.canvasId;
        canvas.width = this.options.width;
        canvas.height = this.options.height;
        canvas.style.cursor = "pointer";
        canvas.innerHTML = "鎮ㄧ殑娴忚鍣ㄧ増鏈笉鏀寔canvas";
        con.appendChild(canvas);
        var parent = this;
        canvas.onclick = function(){
          parent.refresh();
        }
      },

      /**鐢熸垚楠岃瘉鐮�**/
      refresh: function() {
        this.options.code = "";
        var canvas = document.getElementById(this.options.canvasId);
        if(canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }else{
          return;
        }

        ctx.textBaseline = "middle";

        ctx.fillStyle = randomColor(180, 240);
        ctx.fillRect(0, 0, this.options.width, this.options.height);

        if(this.options.type == "blend") { //鍒ゆ柇楠岃瘉鐮佺被鍨�
          var txtArr = this.options.numArr.concat(this.options.letterArr);
        } else if(this.options.type == "number") {
          var txtArr = this.options.numArr;
        } else {
          var txtArr = this.options.letterArr;
        }

        for(var i = 1; i <= 4; i++) {
          var txt = txtArr[randomNum(0, txtArr.length)];
          this.options.code += txt;
          ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //闅忔満鐢熸垚瀛椾綋澶у皬
          ctx.fillStyle = randomColor(50, 160); //闅忔満鐢熸垚瀛椾綋棰滆壊
          ctx.shadowOffsetX = randomNum(-3, 3);
          ctx.shadowOffsetY = randomNum(-3, 3);
          ctx.shadowBlur = randomNum(-3, 3);
          ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
          var x = this.options.width / 5 * i;
          var y = this.options.height / 2;
          var deg = randomNum(-30, 30);
          /**璁剧疆鏃嬭浆瑙掑害鍜屽潗鏍囧師鐐�**/
          ctx.translate(x, y);
          ctx.rotate(deg * Math.PI / 180);
          ctx.fillText(txt, 0, 0);
          /**鎭㈠鏃嬭浆瑙掑害鍜屽潗鏍囧師鐐�**/
          ctx.rotate(-deg * Math.PI / 180);
          ctx.translate(-x, -y);
        }
        /**缁樺埗骞叉壈绾�**/
        for(var i = 0; i < 4; i++) {
          ctx.strokeStyle = randomColor(40, 180);
          ctx.beginPath();
          ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
          ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
          ctx.stroke();
        }
        /**缁樺埗骞叉壈鐐�**/
        for(var i = 0; i < this.options.width/4; i++) {
          ctx.fillStyle = randomColor(0, 255);
          ctx.beginPath();
          ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
          ctx.fill();
        }
      },

      /**楠岃瘉楠岃瘉鐮�**/
      validate: function(code){
        var code = code.toLowerCase();
        var v_code = this.options.code.toLowerCase();
        console.log(v_code);
        if(code == v_code){
          return true;
        }else{
          this.refresh();
          return false;
        }
      }
    }
    /**鐢熸垚瀛楁瘝鏁扮粍**/
    function getAllLetter() {
      var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
      return letterStr.split(",");
    }
    /**鐢熸垚涓€涓殢鏈烘暟**/
    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
    /**鐢熸垚涓€涓殢鏈鸿壊**/
    function randomColor(min, max) {
      var r = randomNum(min, max);
      var g = randomNum(min, max);
      var b = randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
    window.GVerify = GVerify;
  })(window, document);
</script>
<script>
  var verifyCode = new GVerify("v_container");

  document.getElementById("my_button").onclick = function(){
    var res = verifyCode.validate(document.getElementById("code_input").value);
    if(res){

      // var data = $("#for").serialize();
      //
      // $.get("http://localhost:9090/a",data);

      $(function() {
        var name2=document.getElementById("username").value;
        var pass2=document.getElementById("password").value;
        var stu = {"username":name2,"password":pass2};
        $.ajax({
          type : 'POST',
          url : 'http://localhost:9090/a',
          type:'post',
          method:"post",
          contentType:'application/json',
          data : JSON.stringify(stu),
          success:function (data) {
           console.log(data.data)
          if(data.data=="成功"){
            alert("成功")
            window.location.href = "http://localhost:9090/login";
          }else{
            alert("失败")
            window.location.href = "http://localhost:9090/enroll2.html";
          }

            //
          }
        })
      })
      alert("验证正确");
    }else{
      alert("验证码错误");
    }
  }

</script>

</body>
</html>